<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用css实现如下的多列布局(九宫格)效果</title>
</head>
<style>
    /* 
    用css实现如下的多列布局(九宫格)效果:父元素宽度自适应，直接子元素数量随机可变的(假如8个)，
    每一行有3个子元素，子元素之间的水平间距为10px，子元素的宽度自适应父元素的宽度((父元素宽度-10px*2)/3)，
    子元素的高度与本身的宽度成正比(比如2：1)
    */
    .father {
        display: flex;
        flex-wrap: wrap;
        width: 50%;
        background-color: aqua;
        border: 2px red solid;
    }

    .son {
        width: calc((100% - 10px*2)/3);
        aspect-ratio: 2/1;
        /* 实现宽高比为2：1*/
        margin-right: 10px;
        margin-bottom: 5px;
        background-color: brown;
    }

    .father .son:nth-child(3n) {
        margin-right: 0;
    }

    .father .son:nth-child(n+7) {
        margin-bottom: 0;
    }
</style>

<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>

</html>